<template>
  <div>
    <h3>下拉树，后端搜索组件</h3>
    <selectTree
      :options="treeList"
      placeholder="下拉树，后端搜索"
      width="300px"
      :defaultData="defaultValue"
      :treeProps="treeProps"
      @handleNodeClick="handleNodeClick"
      @changeFilterValue="changeFilterValue"
    ></selectTree>
    
  </div>
</template>

<script>
import selectTree from '../../components/selectTree.vue'
export default {
  name: 'selectTreeView',
  components: {
    selectTree,
  },
  data() {
    return {
      // defaultValue: { id: '1', label: '一级一级1-1' },
      defaultValue: { id: '1-1-1',
                  name: '三级 1-1-1' },
      treeProps: {
        value: 'id',
        children: 'children',
        label: 'name'
      },
      treeList: [
        {
          id: '1',
          name: '一级一级1-1',
          children: [
            {
              id: '1-1',
              name: '二级 1-1',
              children: [
                {
                  id: '1-1-1',
                  name: '三级 1-1-1',
                },
              ],
            },
          ],
        },
        {
          name: '一级 2',
          id: '2',
          children: [
            {
              id: '2-1',
              name: '二级 2-1',
              children: [
                {
                  id: '2-1-1',
                  name: '三级 2-1-1',
                },
              ],
            },
            {
              id: '2-2',
              name: '二级 2-2',
              children: [
                {
                  id: '2-2-1',
                  name: '三级 2-2-1鸡腿'
                },
              ],
            },
          ],
        },
      ]
    }
  },
  methods: {
    handleNodeClick(val) {
      console.log('选中---->', val)
    },
    async changeFilterValue(val){
      console.log(val,"changeFilterValuechangeFilterValuechangeFilterValue");
      // 在此处调用接口   重新给treeList赋值
      setTimeout(() => {
        this.treeList = [
        {
          id: '1',
          name: '一级一级1-1',
          children: [
            {
              id: '1-1',
              name: '二级二级 1-1',
              children: [
                {
                  id: '1-1-1',
                  name: '三集 1-1-1',
                },
              ],
            },
          ],
        },
        {
          name: '一级一级 2',
          id: '2',
          children: [
            {
              id: '2-1',
              name: '二级二级 2-1',
              children: [
                {
                  id: '2-1-1',
                  name: '三集 2-1-1',
                },
              ],
            },
            {
              id: '2-2',
              name: '二级二级 2-2',
              children: [
                {
                  id: '2-2-1',
                  name: '三集 2-2-1鸡腿'
                },
              ],
            },
          ],
        },
      ]
      },200)
    }
  }
}
</script>

